<template>
    <div class="form">
        <div class="formTip">
            <van-image :src="img"></van-image>
            <p>我们将以短信或电话的形式将验证码发送给您</p>
        </div>
        <van-field v-model="telcode" clearable label="验证码" placeholder="请输入验证码">
            <template #button>
                <van-button size="small" :disabled="time<10" @click="sendCodeFn">
                    {{ text }}
                </van-button>
            </template>
        </van-field>
        <div class="my-button">
            <van-button type="danger" :disabled="flag" block @click="checkTel">下一步</van-button>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Field, Button, Image as VanImage, Toast } from "vant";

import { doSendCode, doCheckCode } from "@/utlis/user";
Vue.use(Toast);
Vue.use(Button);
Vue.use(Field);
Vue.use(VanImage);
export default {
        data() {
        return {
            text: "发送验证码",
            telcode: "",
            //#region
            img: "",
               //#endregion
            time: 10, // 10 秒倒计时
            timer: null, // 计时器
            pull:false,
        };
    },
        methods: {
        checkTel() {
            doCheckCode({
                tel: localStorage.getItem("tel"),
                telcode: this.telcode,
            }).then((res) => {
                console.log(res);
                if (res.data.code == "10007") {
                    Toast("验证码输入错误");
                } else {
                    this.$router.push("/register/step3");
                }
            });
        },
        sendCodeFn() {
            // 发送验证码
            doSendCode({ tel: localStorage.getItem("tel") }).then((res) => {
                console.log(res);
                Toast(res.data.message);
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.text = this.time + "s后获取";
                    this.time--;
                    if (this.time == -1) {
                        clearInterval(this.timer);
                        this.time = 10;
                        this.text = "发送验证码";
                    }
                }, 1000);

            });
        },
    },
        computed: {
        flag() {
            if (this.telcode.length == 5) {
                return false;
            } else {
                return true;
            }
        },
    },
    
    
}
</script>
<style>
.formTip {
    display: flex;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>